<template>
	<view class="relative overflow">
		<zh-sheet :darkBgColor="props.darkBgColor" @click="cellClick" :color="props.color"
			:followTheme="props.followTheme" :dark="props.dark" :followDark="props.followDark" :round="props.round"
			:shadow="props.shadow" :outlined="props.outlined" :border="props.border" :borderStyle="props.borderStyle"
			:borderDirection="props.borderDirection" :text="props.text" :transprent="props.transprent"
			:linear="props.linear" :linearDeep="props.linearDeep" :width="props.width" :height="props.height"
			:margin="props.margin" :padding="props.padding" :_class="props._class" :_style="props._style"
			hover-class="props.hoverClass">
			<view :userInteractionEnabled="true" class="flex flex-row flex-row-center-center"
				:class="[_computedValue.url ? 'url' : '']">
				<view v-if="_computedValue.showAvatar" :style="{
            width: `${_computedValue.avatarSize}rpx`,
            height: `${_computedValue.avatarSize}rpx`,
          }" class="flex flex-row flex-row-center-center">
					<slot name="avatar">
						<zh-image :round="_computedValue.avatarRound" :width="_computedValue.avatarSize"
							:height="_computedValue.avatarSize" :src="_computedValue.avatar"></zh-image>
					</slot>
				</view>

				<view class="flex-1 flex flex-row flex-row-center-between" style="width: 0px">
					<view>
						<view class="flex flex-5 flex-col" :class="[_computedValue.showAvatar ? 'pl-24' : '']">
							<slot name="title">
								<zh-text :color="_computedValue.titleColor" :fontSize="_computedValue.titleFontSize"
									:label="_computedValue.title"></zh-text>
							</slot>
							<slot name="label">
								<view v-if="_computedValue.label" class="mt-6">
									<zh-text :color="_computedValue.labelColor" :fontSize="_computedValue.labelFontSize"
										:label="_computedValue.label"></zh-text>
								</view>
							</slot>
						</view>
					</view>
					<view class="flex-1 flex-row flex-row-center-end" style="width: 0px">
						<slot name="rightText">
							<zh-text _class="nowrap pr-12" :color="_computedValue.rightColor"
								v-if="_computedValue.rightText" :fontSize="_computedValue.rightTextSize"
								:label="_computedValue.rightText"></zh-text>
						</slot>
						<slot name="right">
							<tm-icon v-if="_computedValue.rightIcon" _class="opacity-3" :name="_computedValue.rightIcon"
								:fontSize="22"> </tm-icon>
						</slot>
					</view>
				</view>
			</view>
		</zh-sheet>
		<zh-divider v-if="_computedValue.bottomBorder" :margin="[0, 0]" :border="2" color="grey-5"
			:real-color="!store.dark" :style="{
        left: `${_computedValue.avatar !== '' ? _computedValue.avatarSize + _computedValue.margin[0] : 0}rpx`,
      }"></zh-divider>
	</view>
</template>

<script lang="ts" setup>
	/**
   * 单元格
   * @description 常用于列表
   * @example 示例
   * <zh-sheet :round="8" :padding="[0,0]">
	  <zh-cell :bottomBorder="false" title="这是标题"></zh-cell>
	  <zh-cell :bottomBorder="false"  title="这是标题"></zh-cell>
	  <zh-cell  :bottomBorder="false" title="这是标题"></zh-cell>
	  <zh-cell :bottomBorder="false"  title="设置" rightText="已阅读同意">
		<template v-slot:right>
		  <zh-checkbox ></zh-checkbox>
		</template>
	  </zh-cell>
	</zh-sheet>
   */
	import { getCurrentInstance, computed, PropType } from 'vue';
	import { cssDirection } from '@/tool/lib/interface';
	import { custom_props } from '@/tool/lib/minxs';
	import systemConfigStore from '@/store/modules/systemConfigStore';
	const store = systemConfigStore();
	const emits = defineEmits(['click']);
	const props = defineProps({
		...custom_props,
		shadow: {
			type: [Number],
			default: 0,
		},
		round: {
			type: [Number],
			default: 0,
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [32, 0],
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [24, 24],
		},
		height: {
			type: [Number],
			default: 0,
		},
		width: {
			type: [Number],
			default: 0,
		},
		transprent: {
			type: [Boolean],
			default: false,
		},
		color: {
			type: String,
			default: 'white',
		},
		//标题
		title: {
			type: String,
			default: '',
		},
		titleFontSize: {
			type: [Number],
			default: 28,
		},
		titleColor: {
			type: String,
			default: '',
		},
		//标题下方的介绍
		label: {
			type: String,
			default: '',
		},
		labelFontSize: {
			type: [Number],
			default: 22,
		},
		labelColor: {
			type: String,
			default: 'grey',
		},
		//右边文字
		rightText: {
			type: String,
			default: '',
		},
		rightIcon: {
			type: String,
			default: 'tmicon-angle-right',
		},
		//右边文字
		rightColor: {
			type: String,
			default: 'grey',
		},
		//右边文字大小。
		rightTextSize: {
			type: Number,
			default: 24,
		},
		showAvatar: {
			type: Boolean,
			default: false,
		},
		//头像。
		//https://picsum.photos/200
		avatar: {
			type: String,
			default: '',
		},
		avatarSize: {
			type: Number,
			default: 60,
		},
		avatarRound: {
			type: Number,
			default: 10,
		},
		border: {
			type: [Number],
			default: 0,
		},
		borderDirection: {
			type: [String],
			default: cssDirection.bottom,
		},
		//显示下边线
		bottomBorder: {
			type: [Boolean],
			default: false,
		},
		//当有链接地址时，将打开链接
		url: {
			type: String,
			default: '',
		},
		//暗下强制的背景色，
		//有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色，
		//只能是颜色值。
		darkBgColor: {
			type: String,
			default: '',
		},
		hoverClass: {
			type: String,
			default: 'opacity-6'
		},
	});
	function cellClick(e : any) {
		emits('click', e);
		if (props.url !== '') {
			try {
				uni.navigateTo({
					url: props.url,
					fail(error) {
						console.error('打开连接错误：', error);
					},
				});
			} catch (e) {
				//TODO handle the exception
			}
		}
	}

	const _computedValue = computed(() => props);
</script>

<style scoped>
	.url {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
</style>